<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>账号注册</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="Keywords" content="sofangche" />
    <!-- 引入Bootstrap框架 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

    <!-- 引入全局css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/common/allcss/stander.css" />
    <!-- 引入全局js -->
    <script src="${pageContext.request.contextPath}/static/pcsofangche/common/alljs/stander.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入页面css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/pcsofangche/user/register/register.css" />
    <!-- 引入页面js -->
    <script src="${pageContext.request.contextPath}/static/pcsofangche/user/register/register.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<jsp:include page="../../common/allhead/allhead.html" flush="true"/>
<div class="container">
    <div class="row back">
        <div class="col-lg-12 col-md-12">
            <div class="userpsw">
                <div class="rejister">会员注册</div>
                <div class="phone">
                    <input type="text" placeholder="请输入中国大陆手机号" style="color:grey;width: 330px;height: 40px;" id="phone" />
                </div>
                <div class="waring" id="phonewaring">该手机号已注册，请更换手机号或直接登陆</div>
                <div class="vcode">
                    <input type="text" placeholder="请输入右边图片验证码" style="color:grey;width: 220px;height: 40px;" id="vcode"/>
                    <div class="vcodeimg">
                        <img src="/meb/codeimg" id="vcodeimg" style="height: 40px;width:110px" onclick="changevcode()">
                    </div>
                </div>
                <div class="waring" id="vcodewaring">验证码错误，请重新输入</div>
                <div class="pcode">
                    <input type="text" placeholder="手机验证码" id="pcode" style="color:grey;width: 220px;height: 40px;"/>
                    <div class="sendpcode" onclick="sendcode()"><span>发送验证码</span></div>
                </div>
                <div class="waring">手机验证码错误，请重新输入</div>
                <div class="password">
                    <input type="checkbox" id="psdflag" onclick="checkboxOnclick(this)">我要设置登陆密码
                </div>
                <div class="info">(如未设置登陆密码，可直接用手机验证码登陆)</div>
                <div class="psd" id="password">
                    <input type="password"  style="color:grey;width: 330px;height: 40px;" placeholder="请输入密码" id="pswd"><%--密码中文提示没做，用span覆盖--%>
                </div>
                <div class="submit" onclick="register()">
                    注&nbsp;&nbsp;&nbsp;&nbsp;册
                </div>
            </div>
        </div>

    </div>
</div>
<jsp:include page="../../common/allfoot/allfoot.html" flush="true"/>

</body>
<script>
    var pcheck="2";
    var vcheck="2";  
    $(document).ready(function(){
    });


    //选择是否设置密码
    function checkboxOnclick(checkbox) {
        if (checkbox.checked == true) {
            $("#password").css('display','block');
            $(".submit").css('margin-top','20px');
        } else {
            $("#password").css('display','none');
            $(".submit").css('margin-top','50px');
        }
    }

    //点击验证码切换
    function changevcode(){
        console.log("123")
        let random=Math.random()
        console.log(random);
        $("#vcodeimg").attr('src','/meb/codeimg?'+random);
    }
    //手机号失焦检测是否存在
    $("#phone").blur(function(){

        let phone=$("#phone").val();
        console.log(phone)
        $.ajax({
            url:'http:/meb/checkphone',
            data:{
                phone:phone
            },
            type:'post',
            dataType:'json',
            success:function(data){
                pcheck=data.code;
                if(data.code=="2"){
                    console.log("xxxx")
                    $("#phonewaring").css('display','block');
                }
                if(data.code=="1"){
                    $("#phonewaring").css('display','none');
                }
            },
            error:function(data){

            },
            complete:function (data) {

            }
        })

    });


    //验证码失焦检测是否正确
    $("#vcode").blur(function(){

        let vcode=$("#vcode").val();
        console.log(vcode)
        $.ajax({
            url:'http:/meb/checkcode',
            data:{
                code:vcode
            },
            type:'post',
            dataType:'json',
            success:function(data){
                vcheck=data.code;
                if(data.code=="2"){
                    console.log("xxxx")
                    $("#vcodewaring").css('display','block');
                }
                if(data.code=="1"){
                    $("#vcodewaring").css('display','none');
                }
            },
            error:function(data){

            },
            complete:function (data) {

            }
        })

    });

    //点击发送手机验证码
    function sendcode() {
        console.log("执行sendcode")
        let phone=$("#phone").val();
        console.log(phone)
        $.ajax({
            url:'http:/meb/phonecode',
            data:{
                phone:phone
            },
            type:'post',
            dataType:'json',
            success:function(data){
                console.log(data)
            },
            error:function(data){

            },
            complete:function (data) {

            }
        })
    }

    //注册
    function register() {
        let phone=$("#phone").val();
        let password=$("#pswd").val();
        let coed=$("#pcode").val();
        console.log(pcheck)
        console.log(vcheck)
        if(pcheck=='1'){
            $("#phonewaring").css('display','none');
            if(vcheck=='1'){
                $("#vcodewaring").css('display','none');
                $.ajax({
                    url:'http:/meb/register',
                    data:{
                        phone:phone,
                        password:password,
                        code:coed
                    },
                    type:'post',
                    dataType:'json',
                    success:function(data){
                    console.log(data)
                    },
                    error:function(data){

                    },
                    complete:function (data) {

                    }
                })
            }else{
                $("#vcodewaring").css('display','block');
            }
        }else{
            $("#phonewaring").css('display','block');
        }
    }
</script>
</html>
